<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <router-link to="/">查询数据</router-link>
    <el-form label-position="right" :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="填写名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="title">外圈</div>
      <el-form-item v-for="label in items" :label="label.name" prop="">
        <el-select v-model="form['a'+label.id]"  placeholder="选择天赋">
          <el-option
            v-for="item in label.list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="title">中圈</div>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="title">内圈</div>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid" placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'find',
  data () {
    return {
      form: {
        name: '',
        pid: ''
      },
      rules: {
        pid: [ { required: true, message: '请选择职业', trigger: 'change' }],
        name: [{required: true, message: '请输入名称', trigger: 'blur'}]
      },
      pro: [],
      items:[]
    }
  },
  watch:{
    'form.pid':function () {
      console.log(1111)
      this.getTianfu()
    }
  },
  computed: {},
  methods: {
    getPro () {
      this.$ajax.get(this.$tourl.getpro).then((response) => {

        response.data.data.splice(0, 1)

        this.pro = response.data.data
        console.log(this.pro)

      })
    },
    getTianfu(){
      this.$ajax.get(this.$tourl.getazltpro,{params:{pid:this.form.pid}}).then((response) => {

        console.log(response.data.data)
        this.items = [...response.data.data]


      })
    },
    submit(){
      console.log(this)
    }
  },
  mounted () {
    this.getPro()
  }
}
</script>

<style>

</style>
